<template>
  <div>
    <!-- 主视图容器 -->
    <div style="margin-bottom: 50px; position: relative;">
      <transition name="maizuo" mode="out-in" appear>
        <keep-alive include="CitiesView">
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    <!-- 底部导航区 -->
    <bottom-navbar></bottom-navbar>
  </div>
</template>

<script>
import BottomNavbar from '@/components/BottomNavbar'
import '@/style/index.scss' // 引入全局 scss 样式文件

export default {
  name: 'App',
  components: { BottomNavbar }
}
</script>

<style lang="scss" scoped>
/* 主路由切换动画效果 */
.maizuo-enter-active {
  animation: maizuo 0.2s ease reverse;
}
.maizuo-leave-active {
  animation: maizuo 0.5s ease;
}
@keyframes maizuo {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}
</style>
